<template>
  <!-- :class="{'focus':focued}" -->
  <div class="date_pick-box__"
       :class="{'focus':focued}"
       @click="dianji"
       @mouseenter="showClose=true"
       @mouseleave="showClose=false">
    <el-date-picker class="picker"
                    v-model="start"
                    :showPrefixIcon="false"
                    type="date"
                    format="yyyy-MM-dd"
                    placeholder="开始日期"
                    size="small"
                    :picker-options="startDatePicker"
                    :clearable="false"
                    @change="startChange"
                    @blur='leaveblur'>
    </el-date-picker>
    <span class="fs14">~</span>
    <el-date-picker class="picker"
                    v-model="end"
                    :showPrefixIcon="false"
                    type="date"
                    format="yyyy-MM-dd"
                    placeholder="结束日期"
                    size="small"
                    :picker-options="endDatePicker"
                    unlink-panels
                    :clearable="false"
                    @change="passDates"
                    @blur='leaveblur'>
    </el-date-picker>
    <i v-if="clearbtn"
       class="el-input__icon el-icon-circle-close el-input__clear"
       v-show="isShowClose"
       @click="reset"></i>
    <i class="el-icon-date"></i>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { ONE_DAY_MS } from '@/consts/consts'
export default {
  name: 'DatePick',
  props: {
    startTime: {
      type: [String, Number],
      required: false,
      default: '开始日期'
    },
    endTime: {
      type: [String, Number],
      required: false,
      default: '结束日期'
    },
    clearbtn: {
      type: Boolean,
      required: false,
      default: false
    },
    endEnableDate: {
      type: Number,
      required: false,
      default: 0
    }
  },
  watch: {
    toggleAlarm (val) {
      this.setTime()
    }
  },
  data () {
    return {
      value: '',
      startTime_: '',
      endTime_: '',
      startDatePicker: this.beginDate(),
      endDatePicker: this.endDate(),
      start: '',
      end: '',
      isLoad: false,
      showClose: false,
      focued: false
    }
  },
  computed: {
    isShowClose () {
      return this.start && this.end && this.showClose
    },
    ...mapState(['toggleAlarm'])
  },
  created () {
    this.setTime()
    
  },
  mounted () {
    setTimeout(() => {
      this.isLoad = true
    }, 500)
  },
  methods: {
    setTime () {
      if (this.startTime !== '开始日期') {
        this.startTime_ = this.toYYYYMMDD(this.startTime)
        this.start = this.startTime_
      } else {
        this.start = ''
      }
      if (this.endTime !== '结束日期') {
        this.endTime_ = this.toYYYYMMDD(this.endTime)
        this.end = this.endTime_
      } else {
        this.end = ''
      }
    },
    reset () {
      this.start = null
      this.end = null
      this.$emit('passDate', [null, null])
    },
    dianji () {
      this.focued = true
    },
    leaveblur () {
      this.focued = false
    },
    triggerChoose () {
      console.log(this.$refs.datetimePicker)
      this.$refs.datetimePicker.focus()
    },

    startChange (e) {
      if (this.isLoad) {
        this.end = null
      }
    },

    passDates () {
      this.$emit('passDate', [new Date(this.start).getTime(), this.dayEndTime(this.end)])
    },
    clear () {
      this.value = ''
      this.startTime = '开始日期'
      this.endTime = '结束日期'
    },
    beginDate () {
      const _self = this
      return {
        disabledDate (time) {
          if (_self.endEnableDate > 0) {
            return time.getTime() > Date.now() - _self.endEnableDate // 开始时间不选时，结束时间最大值小于等于当天
          } else {
            return time.getTime() > Date.now() // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    endDate () {
      const _self = this
      return {
        disabledDate (time) {
          if (_self.endEnableDate > 0) {
            return time.getTime() > Date.now() - _self.endEnableDate // 开始时间不选时，结束时间最大值小于等于当天
          } else {
            return time.getTime() <= new Date(_self.start).getTime() - ONE_DAY_MS || time.getTime() > Date.now() // 开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    dayEndTime (ms) {
      let t = new Date(new Date(ms).toDateString()).getTime() + 24 * 3600 * 1000 - 1
      return t
    },
    toYYYYMMDD (ms) {
      let time = new Date(ms)
      // console.log(timeSecond)
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      let day = time.getDate()
      let hour = time.getHours()
      let min = time.getMinutes()
      let second = time.getSeconds()
      if (month < 10) {
        month = `0${month}`
      }
      if (day < 10) {
        day = `0${day}`
      }
      if (hour < 10) {
        hour = `0${hour}`
      }
      if (min < 10) {
        min = `0${min}`
      }
      if (second < 10) {
        second = `0${second}`
      }
      let t = `${year}-${month}-${day}`
      return t
    }
    // ################# methods #########
  },


}
</script>

<style lang="stylus">
.right-picker {
  width: getPx(320) !important;
  float: right;
  transform: translate(0, getPx(-10));
  &.drawer-picker {
    @media all and (max-height: $h) {
      width: 220px !important;
    }  
  }
}
.date_pick-box__ {
  .el-input__inner {
    height: getPx(28);
    font-family: SourceHanSansCN-Regular;
    padding: 0 getPx(25) 0 getPx(5);
    font-size: 12px;
    max-width: 110px;
    border: 0;
    text-align: center;
    background: transparent;
  }
  .fs14 {
    margin-right: getPx(10);
  }
  .el-input__prefix {
    transform: translate(getPx(-5), getPx(-3));
    display: none;
  }
  .el-input--suffix {
    padding-right: 0;
    font-size: getPx(12);
  }
  .el-icon-date {
    transform: translate(getPx(-5), 0);
    margin-left: getPx(5);
  }
}
</style>

<style lang="stylus" scoped>
.picker {
  display: inline-block;

}
.date_pick-box__ {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 getPx(6) 0 getPx(10);
  box-sizing: border-box;
  flexMiddle(space-between);
  border: 1px solid $border-color;
  border-radius: getPx(24);
  &.focus {
    border-color: #409EFF !important;
  }
}
.date_pick-box__:hover {
  border-color: #fff;
}
.datepicker_____ {
  opacity: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}
.clearbtn1 {
  margin-right: getPx(5);
}
.clearbtn2 {
  margin-right: getPx(5);
}
.el-input__clear {
  position: absolute;
  right: getPx(3);
  top: 50%;
  transform: translate(-80%, -60%) scale(0.8);
  cursor: pointer;
  @media all and (max-height: $h) {
    transform: translate(-80%, -70%) scale(0.8);
  }
}
</style>
